<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
    <style>
        .error{
            font-size: 12px;
            color:red;
        }
    </style>
</head>
<body>
    <form action="#" method="post" id="f">
        <table border="1px" cellpadding="10px" cellspacing="0px" align="center">
            <tr>
                <th colspan="2"><h3>登录界面</h3></th>
            </tr>
            <tr>
                <td>username</td>
                <td><input type="text" name="name" placeholder="请输入用户名" /></td>
            </tr>
            <tr>
                <td>email</td>
                <td><input type="email" name="email" placeholder="请输入邮箱" /></td>
            </tr>
            <tr>
                <td>password</td>
                <td><input type="password" name="pwd" placeholder="请输入密码" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../validate/jquery.validate.min.js"></script>
<script src="../validate/messages_zh.js"></script>

<script>

    $("#f").validate({
        rules:{
            "name":{
                required:true
            },
            "email":{
                required:true,
                email:true
            },
            "pwd":{
                required:true,
                minlength:6
            }
        },
        messages:{
            "name":{
                required:"姓名必须填写"
            },
            "email":{
                required:"邮箱必须填写",
                email:"邮箱格式必须正确"
            },
            "pwd":{
                required:"密码必须填写",
                minlength:"密码最低六位"
            }
        }
    });

</script>